<template>
  <div>
    <el-card id="search">
      <el-input v-model="searchModel.title" placeholder="书名"></el-input>
      <el-button @click="getUserBookList" type="primary" round icon="el-icon-search">查询</el-button>
    </el-card>
    <el-card>
      <template>
        <el-table :data="userBookList" stripe style="width: 100%">
          <el-table-column prop="index" label="#" width="120">
            <template v-slot="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="title" label="书籍" width="180"></el-table-column>
          <el-table-column prop="author" label="作者" width="200"></el-table-column>
          <el-table-column prop="number" label="数量" width="200"></el-table-column>
          <el-table-column prop="purchaseDate" label="购买时间"></el-table-column>
          <el-table-column label="操作">
            <template v-slot:="scope">
              <div class="book-actions">
                <el-button type="text" @click="viewBook(scope.row.bookId)">在线阅读</el-button>
                <el-link href="https://sky-boy.oss-cn-hangzhou.aliyuncs.com/ycl/image/%E7%AE%97%E6%B3%95%E5%9B%BE%E8%A7%A3.pdf" type="primary">下载</el-link>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>
  </div>
</template>

<script>
import bookApi from '@/api/book'

export default {
  data() {
    return {
      userBookList: [],
      searchModel: {},
      books: [
        {title: '示例书籍1', description: '这是一本很棒的书...'},
        {title: '示例书籍2', description: '另一本优秀的书...'},
        // ...添加更多书籍
      ]
    }
  },
  methods: {
    viewBook(book) {
      // 在这里处理打开书籍内容观看界面的逻辑
      // 可以使用路由或弹窗等方式展示书籍内容
      // 例如：this.$router.push(`/book/${book.id}`);
    },
    getUserBookList() {
      bookApi.getUserBookList(this.searchModel).then(response => {
        this.userBookList = response.data
      })
    }
  },
  mounted() {
    this.getUserBookList()
  }
}
</script>

<style>
.book-actions {
  display: flex;
  gap: 10px; /* 控制元素之间的间隔 */
}
</style>
